{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 坐标轴\n",
    "\n",
    "坐标轴的绘制，需要使用到svg"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "Document { location: [Getter/Setter] }"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "var jsdom = require('jsdom');\n",
    "const {\n",
    "    JSDOM\n",
    "} = jsdom;\n",
    "const {\n",
    "    document\n",
    "} = (new JSDOM('')).window;\n",
    "global.document = document;\n",
    "var d3 = require(\"d3\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "先创建一个svg元素，用于展示坐标"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": []
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "var marge = {\n",
    "    top: 60,\n",
    "    bottom: 60,\n",
    "    left: 60,\n",
    "    right: 60\n",
    "}\n",
    "var dataset = [2.5, 2.1, 1.7, 1.3, 0.9];\n",
    "\n",
    "var scaleLinear = d3.scaleLinear()\n",
    "    .domain([0, d3.max(dataset)])\n",
    "    .range([0, 250]);\n",
    "\n",
    "var svg = d3.select(\"svg\");\n",
    "var g = svg.append(\"g\")\n",
    "    .attr(\"transform\", \"translate(\" + marge.top + \",\" + marge.left + \")\")\n",
    "    .style(\"background-color\", \"#eee\")\n",
    "\n",
    "\n",
    "$$.html(document.body.innerHTML);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "d3.axisBottom(scale) \n",
    "Constructs a new bottom-oriented axis generator for the given scale, with empty tick arguments, a tick size of 6 and padding of 3. In this orientation, ticks are drawn below the horizontal domain path."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": []
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "var rectHeight = 30;\n",
    "\n",
    "//为坐标轴定义一个线性比例尺\n",
    "var xScale = d3.scaleLinear()\n",
    "    .domain([0, d3.max(dataset)])\n",
    "    .range([0, 250]);\n",
    "//定义一个坐标轴\n",
    "var xAxis = d3.axisBottom(xScale) //定义一个axis，由bottom可知，是朝下的\n",
    "    .ticks(7); //设置刻度数目\n",
    "g.append(\"g\")\n",
    "    .attr(\"transform\", \"translate(\" + 20 + \",\" + (dataset.length * rectHeight) + \")\")\n",
    "    .call(xAxis)\n",
    "\n",
    "\n",
    "$$.html(document.body.innerHTML);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "将Axis对象作为参数传入d3.selection.call函数。d3.selection.call会在当前选集上调用该参数"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Javascript (Node.js)",
   "language": "javascript",
   "name": "javascript"
  },
  "language_info": {
   "file_extension": ".js",
   "mimetype": "application/javascript",
   "name": "javascript",
   "version": "13.13.0"
  },
  "toc": {
   "base_numbering": 1,
   "nav_menu": {},
   "number_sections": true,
   "sideBar": true,
   "skip_h1_title": false,
   "title_cell": "Table of Contents",
   "title_sidebar": "Contents",
   "toc_cell": false,
   "toc_position": {},
   "toc_section_display": true,
   "toc_window_display": false
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}
